<template>
	<view class="info">
		<view class="block padding-right">
			<view class="item">
				<view class="title">头像</view>
				<image class="avatar" :src="dataObj.avatar" @click="onUploadAvatarTap"></image>
			</view>
			<view class="item" @click="onInputTap('nickname')">
				<view class="title">姓名</view>
				<view class="content ellipsis-1">{{dataObj.nickname || '-'}}</view>
			</view>
			<view class="item">
				<view class="title">手机号</view>
				<view class="content ellipsis-1">{{dataObj.mobile || '-'}}</view>
			</view>
			<view class="item" @click="onInputTap('identity_id')">
				<view class="title">身份证号</view>
				<view class="content ellipsis-1">{{dataObj.identity_id || '-'}}</view>
			</view>
			<view class="item" @click="onSelectTap('sex')">
				<view class="title">性别</view>
				<view class="content ellipsis-1">{{dataObj.sex === 1 ? '男' : dataObj.sex === 0 ? '女' : ''}}</view>
			</view>
		</view>
		<view class="block padding-right">
			<view class="item" @click="onInputTap('company_name')">
				<view class="title">工作单位</view>
				<view class="content ellipsis-1">{{dataObj.company_name || '-'}}</view>
			</view>
			<!-- <view class="item" @click="onSelectTap('profession')">
				<view class="title">行业类别</view>
				<view class="content ellipsis-1">通信行业</view>
			</view> -->
			<view class="item" @click="onInputTap('role_name')">
				<view class="title">职业名称</view>
				<view class="content ellipsis-1">{{dataObj.role_name || '-'}}</view>
			</view>
			<!-- <view class="item" @click="onInputTap('jobName')">
				<view class="title">工种名称</view>
				<view class="content ellipsis-1">建筑一级师</view>
			</view>
			<view class="item" @click="onSelectTap('level')">
				<view class="title">职业技能等级</view>
				<view class="content ellipsis-1">初级</view>
			</view> -->
			<view class="item" @click="onSelectTap('stu_grade')">
				<view class="title">文化程度</view>
				<view class="content ellipsis-1">{{dicObj.stu_grade[dataObj.stu_grade]}}</view>
			</view>
		</view>
		<view class="block" @click="onLogoutTap">
			<view class="btn">退出登录</view>
		</view>
	</view>
</template>

<script>
	import { getInfoData, requestErrorTip } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				dataObj: {
					avatar: '', // 头像
					nickname: '',
					mobile: '',
					identity_id: '', // 身份证号
					sex: '',
					company_name: '', // 单位名称
					role_name: '', // 职位名称
					stu_grade: '', // 学历
				},
				dicObj: {
					stu_grade: {
						'1': '初中',
						'2': '高中',
						'3': '中专',
						'4': '大专',
						'5': '本科',
						'6': '硕士',
						'7': '博士',
					}
				}
			}
		},
		onShow() {
			this.dataObj = uni.getStorageSync('userInfo');
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.dataObj = uni.getStorageSync('userInfo');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 页面跳转(输入框)
			onInputTap(type) {
				uni.navigateTo({
					url: './info-input?type=' + type
				});
			},
			// 页面跳转(选择框)
			onSelectTap(type) {
				const value = this.dataObj[type];
				uni.navigateTo({
					url: './info-select?type=' + type + '&value=' + value
				});
			},
			// 上传头像
			onUploadAvatarTap() {
				const _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择和拍照
					success: (res) => {
						console.log(res, 'res');
						const tempFilePaths = res.tempFilePaths;
						// if (_this.imgList.length+tempFilePaths.length > _this.imgMaxNum) {
						// 	requestErrorTip('toast', '超过上传图片的最大数量');
						// } else {
						// 	if (_this.imgList.length != 0) {
						// 		_this.imgList = _this.imgList.concat(res.tempFilePaths);
						// 	} else {
						// 		_this.imgList = res.tempFilePaths;
						// 	}
						// 	for (const i = 0; i < tempFilePaths.length; i++) {
								let timestamp = new Date().getTime();
								// let enMsg = hex_md5('@' + hex_md5('@' + timestamp + '~') + '~');
								uni.uploadFile({
									url: 'https://www.renbang.hcxtec.com/api', // 上传的服务器地址
									filePath: tempFilePaths[0],
									method: 'POST',
									name: "file", 
									formData: {
										address: 'images/upload'
									}, success: res => {
										const {data, status} = JSON.parse(res.data);
										if (status) {
											const img_url = data['url'];
											this.postAvatar(img_url);
										}
									}
								});
						// 	}
						// }
					}
				});
			},
			postAvatar(img_url) {
				this.$Requset({
					url: this.$Api['user']['editinfo'],
					data: {
						avatar: img_url
					},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						// 重新获取并存储个人信息数据
						getInfoData(() => {
							// 重新获取缓存数据
							this.dataObj = uni.getStorageSync('userInfo');
						});
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 退出登录
			onLogoutTap() {
				uni.showModal({
					title: '注意',
					content: '您确定退出登录吗？',
					confirmColor: '#FE6B00',
					success: function (res) {
						if (res.confirm) {
							// 清除token
							uni.removeStorageSync('token');
							// 清除用户信息
							uni.removeStorageSync('userInfo');
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/account/login'
								});
							}, 1000);
						}
					}
				});
				// this.$Requset({
				// 	url: this.$Api['account']['logout'],
				// 	data: {
				// 		token: uni.getStorageSync('token')
				// 	},
				// 	success: (res) => {
				// 		const { data, status } = res;
				// 		if (!status) {
				// 			return;
				// 		}
				// 	},
				// 	fail: (err) => {
				// 		console.log(err);
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.info{
		padding-top: 18rpx;
		padding-bottom: 1rpx;
		.padding-right{
			padding: 0 0 0 36rpx;
			.item{
				position: relative;
				height: 40rpx;
				padding: 32rpx 0;
				padding-left: 40%;
				border-bottom: 1rpx solid #EAEFF1;
				&:nth-last-child(1){
					border-bottom: none;
				}
				.title{
					position: absolute;
					top: 32rpx;
					left: 0;
					width: 40%;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 30rpx;
					color: #1A1A1A;
				}
				.avatar{
					position: absolute;
					top: 50%;
					margin-top: -37rpx;
					right: 76rpx;
					width: 74rpx;
					height: 74rpx;
					background-color: #F7F7F7;
					border-radius: 50%;
				}
				.content{
					position: relative;
					float: right;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					color: #7F7F7F;
					padding-right: 76rpx;
					&::after{
						content: '';
						position: absolute;
						top: 50%;
						margin-top: -15rpx;
						right: 36rpx;
						width: 30rpx;
						height: 30rpx;
						background-position: center;
						background-repeat: no-repeat;
						background-size: 100% 100%;
						background-image: url(../../../static/images/common/arrow-right.png);
					}
				}
			}
		}
		.btn{
			height: 40rpx;
			line-height: 40rpx;
			font-size: 30rpx;
			color: $color-common;
			text-align: center;
		}
	}
</style>
